<template>
<div class="wrap">
      <div class="all">
                  <div class="header">
                        <div class="header_icon"><img :src="header_icon"/></div>
                        <div class="header_show">
                            <span class="show_finish" v-html="show_finish"></span>
                            <span class="show_detail" v-html="show_detail"></span>
                        </div>
                        <div v-show="show_btn == '' ? false : true" class="show_btn" @click="pay">{{show_btn}}</div>
                  </div> 
                  <div class="content">
                          <div class="sexChange" @click="sexChange"><img :src="sexImg"/></div>
                          <div class="content_img">
                             <img :src="sex == 1 ? shareImg.boy.img_url : shareImg.girl.img_url" />
                          </div>
                          <div class="content_detail" v-html="content_detail"></span>
                          </div>
                          <div class="content_cao">
                              <ul>
                                  <li class="continue">
                                      <img src="http://file.zoomyoung.cn/web/img/icon/do.png"/>
                                      <span>继续定制</span>
                                  </li>
                                  <li class="save">
                                      <img src="http://file.zoomyoung.cn/web/img/icon/save.png"/>
                                      <img :src="sex == 1 ? shareImg.boy.img_url : shareImg.girl.img_url" class="saveImg"/>
                                      <span>长按保存</span>
                                  </li>
                                  <li class="return" @click="cengShow=true">
                                      <img src="http://file.zoomyoung.cn/web/img/icon/firend.png"/>
                                      <span>分享支持</span>
                                  </li>
                              </ul>
                          </div>
                  </div>
           </div>
           <transition name="fade" >
              <div class="ceng" @click="cengShow=false"  v-show="cengShow">
                    <div class="a1">
                          <div class="a2"></div>
                          <img src="http://file.zoomyoung.cn/web/img/fen.png"/>
                    </div>
              </div>
          </transition>
</div>
</template>
<script>
import wx from 'weixin-js-sdk'
export default {
  name: 'HelloWorld',
  data () {
    return {
      cengShow:false,
      saveTimer:'',
      sex:'',
      sexImg:"http://file.zoomyoung.cn/web/img/model_boy.png",
      header_icon:'',
      show_finish:'',
      show_detail:'',
      content_detail:'',
      show_btn:'',
      order_num:'',
      interVal:""
    }
  },
  methods:{
    pay(){
      var _this=this;
      clearInterval(_this.interVal)
      this.$http.post('http://zoomyoung.cn/api/payment/payByWechatJsApi',{order_num:_this.order_num},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
          _this.$nextTick(function(){
            _this.WXPayment(res.data.data,_this.order_num)
          })
      }).catch(function(err){  
          console.log(err)  
      });
    },
   WXPayment(configJSON,orderNum) {
    var _this=this
     if (typeof WeixinJSBridge === 'undefined') {
         alert('请用手机端打开')
         return false;
     }
     WeixinJSBridge.invoke('getBrandWCPayRequest', configJSON, function (res) {
         switch (res.err_msg) {
             case 'get_brand_wcpay_request:cancel':
                 alert('用户取消支付！');
                 break;
             case 'get_brand_wcpay_request:fail':
                 alert('支付失败！（' + res.err_desc + '）');
                 break;
             case 'get_brand_wcpay_request:ok':
                  _this.check(orderNum);
                 break;
             default:
                 alert(JSON.stringify(res));
                 break;
         }
     });
 },
 check(orderNum) {
         var _this=this;
        this.$http.post('http://zoomyoung.cn/api/payment/checkPayResult',{order_num:orderNum},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
          if(res.data.data.message != 'no_pay'){
            _this.header_icon='http://file.zoomyoung.cn/web/img/icon/icon_finish.png'
            _this.show_finish='支付成功！(咨询电话:020-66344068)'
            _this.show_detail='我们将在5个工作日为您定制生产'
            _this.content_detail='长按保存图片分享，邀请好友一起来定制个性T恤，关注公众号“纵仰青年”更多活动'
            _this.show_btn=''
          }else{
            alert('支付失败!')
          }
      }).catch(function(err){  
          console.log(err)  
      });
    },
    sexChange(){
      var _this=this;
      if(_this.sexImg.indexOf('model_boy')!=-1)
      {
        _this.sexImg="http://file.zoomyoung.cn/web/img/model_girl.png"  
        //显示男模图片
        _this.shareImg.boy.img_url=_this.$store.state.share_imgSrc.boyImg;
        _this.sex=1;
        _this.$store.dispatch('setSexImg',_this.sex);
        _this.$store.dispatch('setShareImg',_this.shareImg)
      }else{
        _this.sexImg="http://file.zoomyoung.cn/web/img/model_boy.png"
        //显示女模图片
        _this.shareImg.girl.img_url=_this.$store.state.share_imgSrc.girlImg;
        _this.sex=2;
         _this.$store.dispatch('setSexImg',_this.sex);
        _this.$store.dispatch('setShareImg',_this.shareImg)
      }
    },
    //获取jssdk的信息
    jssdk(){
         var href=window.location.href;
         this.$http.post('http://zoomyoung.cn/api/wechat/getJsApiPacket',{url:href},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
             wx.config({
                debug:false,
                appId:res.data.data.appId,
                timestamp:res.data.data.timestamp,
                nonceStr:res.data.data.nonceStr,
                signature:res.data.data.signature,
                jsApiList:['onMenuShareTimeline','onMenuShareAppMessage']
            });
            wx.error(function(){
                 console.log('error')
            })
        }).catch(function(err){  
          console.log(err)  
        });
     },
    share(){
      // this.$router.push({name:"good",query:{code:this.$route.query.code}}); 
    var linkHref='http://design2.zoomyoung.cn?path=good?code='+this.$route.query.code;
    console.log(linkHref)
     var shareImgUrl = "http://design.zoomyoung.cn/img/share2.jpg";
     wx.ready(function(){
         wx.onMenuShareTimeline({
            title: '【ZoomYoung】我设计了一款创意个性T恤，快来支持我吧！', // 分享标题
            desc: 'ZoomYoung品牌服饰邀请你一起玩转创意设计~~', // 分享描述
            link: linkHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareImgUrl, // 分享图标
            success: function () {
              console.log('分享到朋友圈成功')  
          },
        })
        wx.onMenuShareAppMessage({
          title: '【ZoomYoung】我设计了一款创意个性T恤，快来支持我吧！', // 分享标题
          desc: 'ZoomYoung品牌服饰邀请你一起玩转创意设计~~', // 分享描述
          link: linkHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: shareImgUrl, // 分享图标
          type: '', // 分享类型,music、video或link，不填默认为link
          dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          success: function () {
                    console.log('分享给朋友成功')          
                }
        });
      })
    },



    //初始化界面
    isActive(message){
      console.log(message)
      if(message.data.is_action==1&&message.data.is_pay==1&&message.data.pay_type=='free')
      {
        this.header_icon="http://file.zoomyoung.cn/web/img/finish@2x.png";
        this.show_finish='活动完成<span style="color:#FFC200">(恭喜您在前20名免费获得T恤)</span>';
        this.show_detail='我们将在5个工作日为您定制生产'
        this.content_detail='长按保存图片分享，邀请好友一起来定制个性T恤，关注公众号“纵仰青年”更多活动'
        this.show_btn="" 
      }

      if(message.data.is_action==1&&message.data.is_pay==0&&message.data.pay_type=='wxpay_6')
      {
        this.header_icon="http://file.zoomyoung.cn/web/img/finish@2x.png";
        this.show_finish='活动完成(恭喜您获得20次支持)';
        this.show_detail='您名次在20名以外，可6折购买哦'
        this.content_detail='长按保存图片分享，邀请好友一起来定制个性T恤，关注公众号“纵仰青年”更多活动'
        this.show_btn="6折购买" 
      }
      if(message.data.is_action==1&&message.data.is_pay==0&&message.data.pay_type=='free')
      {
          var total=message.data.time_init;
          var _this=this;
          this.interVal=setInterval(function () {
              total-=1;
              _this.timeSever(total,_this)
          }, 1000);
          this.header_icon="http://file.zoomyoung.cn/web/img/proceed@2x.png";
          this.show_detail='您已获得<span style="color:#FFC200;">'+message.data.support_num+'</span>次支持'
          this.content_detail='长按保存图片分享，邀请朋友支持你，满20次支持的前20名免费领取T恤<span style="color:#EF2929">(20名以外6折优惠)</span>'
          this.show_btn="原价购买" 
      }
      if(message.data.is_action==0&&message.data.is_pay==0&&message.data.pay_type=='wxpay')
      {
        this.header_icon="http://file.zoomyoung.cn/web/img/over@2x.png";
        this.show_finish='活动结束(很抱歉您没能获得支持)';
        this.show_detail='唔关系，我系土豪中意原价购买'
        this.content_detail='长按保存图片分享，邀请好友一起来定制个性T恤，关注公众号“纵仰青年”更多活动'
        this.show_btn="原价购买" 
      }
      if(message.data.is_pay==1&&message.data.pay_type=='wxpay')
      {
         this.header_icon="http://file.zoomyoung.cn/web/img/icon/icon_finish.png";
        this.show_finish='支付成功！(咨询电话:020-66344068)';
         this.show_detail='我们将在5个工作日为您定制生产'
         this.content_detail='长按保存图片分享，邀请好友一起来定制个性T恤，关注公众号“纵仰青年”更多活动'
          this.show_btn="" 
      }
    },
    //处理时间，把秒数变成时分秒
    timeSever(total,_this){
          var hour = parseInt(total  / 60 / 60 % 24) < 10 ?'0' + parseInt(total  / 60 / 60 % 24) : parseInt(total  / 60 / 60 % 24);
          var minute = parseInt(total  / 60 % 60)< 10 ?'0' + parseInt(total  / 60 % 60) : parseInt(total  / 60 % 60);
          var seconds = parseInt(total  % 60)< 10 ?'0'+ parseInt(total  % 60) : parseInt(total  % 60);
          _this.show_finish='正在参与活动(倒计时'+hour+':'+minute+':'+seconds+')';
    }
  },
  beforeCreate(){
    //接收合成图片
    this.bus.$emit('loading', true);    //把加载层开启
      var _this=this;
      this.$http.post('http://zoomyoung.cn/api/design/build-share-image',{code:this.$route.query.code},{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
          //console.log(res.data.data)
         _this.$store.dispatch('setShareImg',res.data.data)
         _this.$nextTick(function(){
           _this.bus.$emit('loading', false);    //把加载层开启
         })
      }).catch(function(err){  
          console.log(err)  
    });
     this.$http.get('http://zoomyoung.cn/api/design/get-active-status',{
        params:{code:_this.$route.query.code}
     },{xhrFields: {withCredentials: true},crossdomain: true}).then(function(res){ 
          _this.isActive(res.data)
          _this.order_num=res.data.data.order_num;
      }).catch(function(err){  
          console.log(err)  
    });
  },
  mounted(){
   var _this=this
    _this.jssdk();
    _this.share();
  },
  computed:{
    shareImg(){      //更新分享图的地址
      var ia={boy:{img_url:this.$store.state.share_imgSrc.boyImg},girl:{img_url:this.$store.state.share_imgSrc.girlImg}}
      return ia;
    }
  },
}
</script>
<style scoped>
.wrap{width:100%;height: 100%;position: fixed;background: url('http://file.zoomyoung.cn/web/img/finishBackground.png');background-repeat: no-repeat;background-size: 100% 100%;overflow-y: scroll;}
.all{width: 100%;height: 100%;}
.header{width: 100%;height: 130px;background:#1F2023;min-width: 320px}
.header_icon{width: 9.3%;height: 73px;background-size: 100%;background-repeat: no-repeat;background-position: center;float: left;margin-left:10%;margin-top: 30px}
.header_icon img{width: 100%}
.header_show{width: 55.3%;float: left;height: 71px;margin-left:4.5%;font-family: PingFangSC-Regular;font-size: 28px;margin-top: 30px}
.show_btn{width: 20%;height: 71px;float: left;color: white;background-image: linear-gradient(-132deg, #7403FF 0%, #E716C4 100%);border-radius: 8px;margin-top: 30px;font-family: PingFangSC-Medium;font-size: 27px;color: #FFFFFF;letter-spacing: -0.02px;text-align: center;line-height:71px;}
.show_finish{width: 100%;height: 40px;display: block;color: #FFFFFF;letter-spacing: -0.02px;font-size: 22px}
.show_detail{width: 100%;height: 40px;display: block;color: #B5B5B5;letter-spacing: -0.04px;font-size: 20px}
.content{width: 100%;margin-top:1%}
.content_img{width: 80%;margin-left:10%;}
.sexChange{width: 20%;margin-left: 76%}
.sexChange img{width: 100%}
.content_img img{width: 100%;border: 3px solid ;border-image:linear-gradient( #7403FF, #E716C4) 10 10 }
.content_detail{width: 81.3%;height: 96px;margin-left: 10%;line-height: 38px;font-family: PingFangSC-Semibold;font-size: 28px;color: #FFFFFF;letter-spacing: -0.28px;margin-top:4%;}
.content_detail span{color: #EF2929}
.content_cao{width: 100%;height: 162px;margin-top: 3%;z-index: 99}
.content_cao ul{width: 70.6%;height: 162px;display: flex;justify-content: space-between;margin-left: 14.7%}
.content_cao li{width: 24.8%;height:162px;position: relative;}
.content_cao li img{width: 85.93%}
.content_cao li img.saveImg{position: absolute;left: 0;top: 0;opacity: 0;}
.content_cao li span{display: block;width: 100%;height: 40px;margin-top: 10px;font-family: PingFangSC-Semibold;font-size: 32px;color: #FFFFFF;letter-spacing: -0.11px;line-height: 42px;}
.ceng{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
.ceng img{width: 100%;opacity: 1;position: absolute;left: 0;top: 10px}
.ceng .a2{width: 100%;opacity: 0.9;position: absolute;left: 0;top: 0px;height: 100%;background: #000;}
.ceng .a1{width: 100%;height: 100%;position: relative;}
.fade-enter-active, .fade-leave-active {transition: opacity .5s}
.fade-enter,.fade-leave-to {opacity: 0;}
.fade-enter-to,.fade-leave {opacity: 1;}
</style>